<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <mode11></mode11>
    </div>

    <div id="app1">
        <mode11></mode11>
    </div>
       <script type="text/javascript">
           //封装全局组件, model1是自定义的组件名称, 全局组件注册后可以被重复使用
           Vue.component("mode11",{
               //模板, 定义组件的html内容
              template:"<div><h1>{{title}}</h1><button type='button'  @click='ddfn'>点死我</button></div>",

               data:function () {
                   return{
                       title:"hello Vue"
                   }

               },
               //方法函数
               methods:{
                   ddfn:function () {
                       this.title="点不死使劲点";
                   }
               }
           });
           //创建vue对象, 绑定id叫做app的元素内容
           //绑定vue对象后组件才可以使用
            new Vue({
                el:"#app"
            });
           new Vue({
               el:"#app1"
           });




       </script>

</body>
</html>